<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth起步">
    </meta>
    <title>管子</title>
    <!-- 0 引入js文件 -->
    <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
    <script src="../../XbsjCesium/Cesium.js"></script>
    <link rel="stylesheet" href="../../XbsjCesium/Widgets/widgets.css">
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        input {
            width: 166px;
            height: 22px;
        }

        .checkbox {
            display: inline-block;
            cursor: pointer;
        }

        .curvearrow {
            width: 20px;
            height: 16px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
            margin-bottom: 4px;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        .colorbox {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>
    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                        <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
                            <div class="defultbtn" :class="{'btnon':creating}" @click="creating = !creating">创建</div>
                            <div class="defultbtn" :class="{'btnon':editing}"  @click="editing = !editing">编辑</div>
                            <div class="defultbtn" @click=flyto>定位</div><br/>
                            <span @click="closed = !closed" class="checkbox"><input class="curvearrow" type="checkbox" v-model="closed">是否闭合</span><br/>
                            <span style="vertical-align: middle;">图片地址：</span><input type="text" v-model="imageUrl"><br/>
                            <span style="vertical-align: middle;">管子半径：</span><input type="number" v-model.number="radius"><br/>
                            <span style="vertical-align: middle;">移动速度：</span><input type="number" v-model.number="speed[0]"><br/>
                            <span style="vertical-align: middle;">旋转速度：</span><input type="number" v-model.number="speed[1]"><br/>
                            <span style="vertical-align: middle;">径 向 段：</span><input type="number" v-model.number="radialSegments"><br/>
                            <span style="vertical-align: middle;">管　　段：</span><input type="number" v-model.number="tubularSegments"><br/>
                            <span style="vertical-align: middle;">纹理宽度：</span><input type="number" v-model.number="textureSize[0]"><br/>
                            <span style="vertical-align: middle;">纹理高度：</span><input type="number" v-model.number="textureSize[1]"><br/>
                            <span>颜色强度: {{ color[3] }}</span><br/>
                            <input style="width: 286px;" type="range" min="0" max="10" step="1" v-model.number="color[3]"><br/>
                        </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    creating: false, // 创建
                    editing: false, // 编辑
                    closed: false, // 闭合
                    radius: 0, // 半径
                    imageUrl: "", // 图片地址
                    speed: [1, 1],
                    radialSegments: 18,
                    tubularSegments: 50,
                    textureSize: [0, 0],
                    color: [1, 1, 1, 1],
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);
                earth.interaction.picking.enabled = true;

                // 1.1.2 场景配置
                earth.sceneTree.root = {
                    "children": [
                        {
                            "czmObject": {
                                "name": "默认离线影像",
                                "xbsjType": "Imagery",
                                "brightness": 0.2,
                                "xbsjImageryProvider": {
                                    "createTileMapServiceImageryProvider": {
                                        "url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                                        "fileExtension": 'jpg',
                                    },
                                    "type": "createTileMapServiceImageryProvider"
                                }
                            },
                        },
                    ]
                };

                // var circle = earth.sceneTree.$refs.circle.czmObject;

                // // 设置相机位置
                // // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                // earth.camera.position = [1.9188878818218744, 0.41034917133138266, 2743555.2010588413];
                // earth.camera.rotation = [6.173738799303176, -1.1370075117293763, 0.000030663774100325725];

                // 使用自定义的Tube类来创建对象
                const tube = new XE.Obj.CustomPrimitiveExt.Tube(earth);
                tube.imageUrl = './images/ht/meteor_01.png';
                tube.positions = [
                    [2.0315193182543485, 0.6963069713474035, 50.0],
                    [2.031208054060137, 0.6963058641803516, 50.0],
                    [2.0312082890850296, 0.6964532955295221, 50.0],
                ];
                tube.speed = [1, 1];

                tube.flyTo();

                // 数据绑定
                this._creatingUnbind = XE.MVVM.bind(this, 'creating', tube, 'creating');
                this._editingUnbind = XE.MVVM.bind(this, 'editing', tube, 'editing');
                this._closedUnbind = XE.MVVM.bind(this, 'closed', tube, 'closed');
                this._radiusUnbind = XE.MVVM.bind(this, 'radius', tube, 'radius');
                this._imageUrlUnbind = XE.MVVM.bind(this, 'imageUrl', tube, 'imageUrl');
                this._speedUnbind = XE.MVVM.bind(this, 'speed', tube, 'speed');
                this._radialSegmentsUnbind = XE.MVVM.bind(this, 'radialSegments', tube, 'radialSegments');
                this._tubularSegmentsUnbind = XE.MVVM.bind(this, 'tubularSegments', tube, 'tubularSegments');
                this._textureSizeUnbind = XE.MVVM.bind(this, 'textureSize', tube, 'textureSize');
                this._colorUnbind = XE.MVVM.bind(this, 'color', tube, 'color');
                this._earth = earth;

                // only for Debug
                window.tube = tube; // 方便调试
                window.earth = earth;
            },
            methods: {
                flyto() {
                    tube.flyTo();
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._creatingUnbind = this._creatingUnbind && this._creatingUnbind();
                this._editingUnbind = this._editingUnbind && this._editingUnbind();
                this._closedUnbind = this._closedUnbind && this._closedUnbind();
                this._radiusUnbind = this._radiusUnbind && this._radiusUnbind();
                this._imageUrlUnbind = this._imageUrlUnbind && this._imageUrlUnbind();
                this._speedUnbind = this._speedUnbind && this._speedUnbind();
                this._radialSegmentsUnbind = this._radialSegmentsUnbind && this._radialSegmentsUnbind();
                this._tubularSegmentsUnbind = this._tubularSegmentsUnbind && this._tubularSegmentsUnbind();
                this._textureSizeUnbind = this._textureSizeUnbind && this._textureSizeUnbind();
                this._colorUnbind = this._colorUnbind && this._colorUnbind();
                this._earth = this._earth && this._earth.destroy();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            // 加载标绘插件
            return XE.HTML.loadJS('../../XbsjEarth-Plugins/customPrimitive/customPrimitive.js');
        }).then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>